import {
    FlatList,
    SectionList,
    RefreshControl,
    View,
    TouchableOpacity,
    Text,
    ActivityIndicator,
    StyleSheet,
} from 'react-native';
import React, { useEffect, useState } from 'react';
import PropTypes from 'prop-types'


export const RefreshState = {
    Idle: 0,
    HeaderRefreshing: 1,
    FooterRefreshing: 2,
    NoMoreData: 3,
    Failure: 4,
    EmptyData: 5,
}


export function FlatListHooked(props) {
    const [height, setHeight] = useState(0);
    const onLayout = event => {
        const { height } = event.nativeEvent.layout;
        setHeight(height);
    };
    const [refreshing, setRefreshing] = useState(false);

    useEffect(
        () => {
            setRefreshing(props.loading);
        },
        [props.loading]
    );

    const refreshData = ()=>{
        if(refreshing) return
        setRefreshing(true)
        props.onHeaderRefresh(RefreshState.HeaderRefreshing)
    }

    const _keyExtractor = (item, index) => {
        console.log(`${item}${index}`);
        return `item_${index}`;
    }

    const renderFooter = () => {
        let footer = null

        let {
            footerRefreshingText,
            footerFailureText,
            footerNoMoreDataText,
            footerEmptyDataText,

            footerRefreshingComponent,
            footerFailureComponent,
            footerNoMoreDataComponent,
            footerEmptyDataComponent,
        } = props

        switch (props.refreshState) {
            case RefreshState.Idle:
                footer = (<View style={[styles.footerContainer,props.footerStyle]} />)
                break
            case RefreshState.Failure: {
                footer = (
                    <TouchableOpacity onPress={() => {
                        if (props.data.length == 0) {
                            props.onHeaderRefresh && props.onHeaderRefresh(RefreshState.HeaderRefreshing)
                        } else {
                            props.onFooterRefresh && props.onFooterRefresh(RefreshState.FooterRefreshing)
                        }
                    }}
                    >
                        {footerFailureComponent ? footerFailureComponent : (
                            <View style={styles.footerContainer}>
                                <Text style={styles.footerText}>{footerFailureText}</Text>
                            </View>
                        )}
                    </TouchableOpacity>
                )
                break
            }
            case RefreshState.EmptyData: {
                footer = (
                    <View
                        // onPress={() => {
                        //     this.props.onHeaderRefresh && this.props.onHeaderRefresh(RefreshState.HeaderRefreshing)
                        // }}
                    >
                        {footerEmptyDataComponent ? footerEmptyDataComponent : null}
                    </View>
                )
                break
            }
            case RefreshState.FooterRefreshing: {
                footer = footerRefreshingComponent ? footerRefreshingComponent : (
                    <View style={styles.footerContainer} >
                        <ActivityIndicator size="small" color="#888888" />
                        <Text style={[styles.footerText, {marginLeft: 7}]}>{footerRefreshingText}</Text>
                    </View>
                )
                break
            }
            case RefreshState.NoMoreData: {
                footer = footerNoMoreDataComponent ? footerNoMoreDataComponent : (
                    <View style={styles.footerContainer} >
                        <Text style={styles.footerText}>{footerNoMoreDataText}</Text>
                    </View>
                )
                break
            }
        }

        return footer
    }

    return (
        <FlatList
            onLayout={onLayout}
            contentContainerStyle={{ minHeight: height }}
            data={props.data}
            keyExtractor={_keyExtractor}
            renderItem={props.renderItem}
            ListEmptyComponent={props?.loading ? null : props.renderEmpty}
            refreshing={props.loading}
            onEndReached={props.loadMore}
            onEndReachedThreshold={0.1}
            ListFooterComponent={renderFooter}
            onRefresh={() => {
                refreshData();
            }}
            />
    );
}

FlatListHooked.propTypes = {
    ...FlatList.propTypes,
    refreshData:PropTypes.func,
    renderItem:FlatList.propTypes.renderItem
};

export function SectionListHooked(props) {
    const [height, setHeight] = useState(0);
    const [refreshing, setRefreshing] = useState(false);
    const onLayout = event => {
        const { height } = event.nativeEvent.layout;
        setHeight(height);
    };

    useEffect(
        () => {
            setRefreshing(props.loading);
        },
        [props.loading]
    );
    return (
        <SectionList
            {...props}
            onLayout={onLayout}
            contentContainerStyle={{ minHeight: height }}
            data={props.list}
            sections={props.list}
            keyExtractor={props.keyExtractor}
            renderItem={props.renderItem}
            ListHeaderComponent={props.renderHeader}
            ListEmptyComponent={props?.loading ? null : props.renderEmpty}

            // 上拉加载更多
            onEndReached={props.loadMore}
            onEndReachedThreshold={0.1}
            ListFooterComponent={props.renderFooter}
        />
    );
}

SectionListHooked.propTypes = {
    ...SectionList.propTypes
};

const styles = StyleSheet.create({
    footerContainer: {
        flex: 1,
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center',
        padding: 10,
        height: 44,

    },
    footerText: {
        fontSize: 14,
        color: '#555555'
    }
})
